<template>
 <div class="section_info">
            <div class="footer_info">
                <div class="footer_download">
                    <h3>
                        下载QQ音乐客户端
                    </h3>
                    <ul class="download_list">
                        <li class="download_list_item windows"><a href="#"><i class="item_txt">PC版</i></a></li>
                        <li  class="download_list_item mac"><a href="#"><i class="item_txt">MAC版</i></a></li>
                        <li  class="download_list_item android"><a href="#"><i class="item_txt">Android版</i></a></li>
                        <li  class="download_list_item iphone"><a href="#"><i class="item_txt">Iphone版</i></a></li>
                    </ul>
                </div>
                <div class="footer_product">
                    <h3>特色产品</h3>
                    <ul class="product_list">
                        <li class="product_list_item quanminkge"><a href="#"><i class="item_txt">全民K歌</i></a></li>
                        <li class="product_list_item yinheyinxiao"><a href="#"><i class="item_txt">银河音效</i></a></li>
                        <li class="product_list_item qplay"><a href="#"><i class="item_txt">QPlay</i></a></li>
                        <li class="product_list_item fanzhibobanlv"><a href="#"><i class="item_txt">Fan直播伴侣</i></a></li>
                        <br>
                        <li class="product_list_item"><a href="#"><i class="item_txt">车载互联</i></a></li>
                        <li class="product_list_item"><a href="#"><i class="item_txt">QQ演出</i></a></li>
                    </ul>
                </div>
                <div class="footer_link">
                    <h3>合作链接</h3>
                    <ul class="link_list">
                        <li class="link_list_item"><a href="" >CJ ENM</a></li>
                        <li class="link_list_item"><a href="" >腾讯视频</a></li>
                        <li class="link_list_item"><a href="" >手机QQ空间</a></li>
                        <br>
                        <li class="link_list_item"><a href="">最新版QQ</a></li>
                        <li class="link_list_item"><a href="">腾讯社交广告</a></li>
                        <li class="link_list_item"><a href="">电脑管家</a></li>
                        <br>

                        <li class="link_list_item"><a href="">QQ浏览器</a></li>
                        <li class="link_list_item"><a href="">腾讯微云</a></li>
                        <li class="link_list_item"><a href="">腾讯云</a></li>
                        <br>

                        <li class="link_list_item"><a href="">企鹅FM</a></li>
                        <li class="link_list_item"><a href="">智能电视网</a></li>
                        <li class="link_list_item"><a href="">当贝市场</a></li>
                        <br>

                        <li class="link_list_item"><a href="">酷我音乐</a></li>
                        <li class="link_list_item"><a href="">酷狗听书</a></li>

        
                    </ul>
                </div>
                <div class="footer_platform">
                    <h3>开放平台</h3>
                    <ul class="platform_list">
                        <li class="platform_list_item"><a href="#">QQ音乐开放平台</a></li>
                        <li class="platform_list_item"><a href="#">腾讯音乐人</a></li>
                        <li class="platform_list_item"><a href="#">音乐推-歌曲推广</a></li>
                        <br>
                        <li class="platform_list_item"><a href="#">TME-歌曲定制</a></li>
                        <li class="platform_list_item"><a href="#">启明星Venus-词曲交易/歌曲推广</a></li>
                        <br>
                        <li class="platform_list_item"><a href="#">TME Studio</a></li>
                        <li class="platform_list_item"><a href="#">臻品音质认证</a></li>

                    </ul>
                </div>
                <div class="footer_group">
                    <h3 class="group_hd">
                        TME集团官网
                    </h3>
                    <ul class="footer_group_list">
                        <li>
                            <a href="#">
                               腾讯音乐 
                            </a>
                        </li>
                    </ul>
                </div>
              
            </div>
            <div class="footer_copyright">
                <p>
                    <a href="http://www.tencent.com/" rel="noopener noreferrer" target="_blank" title="关于腾讯" class="copyright_item">关于腾讯</a> 
                    <!-- -->|<a href="http://www.tencent.com/index_e.shtml" rel="noopener noreferrer" target="_blank" title="About Tencent" class="copyright_item">About Tencent</a> 
                    <!-- -->|<a href="http://www.qq.com/contract.shtml" rel="noopener noreferrer" target="_blank" title="服务条款" class="copyright_item">服务条款</a> <!-- -->
                    |<a href="http://y.qq.com/y/static/tips/service_tips.html" rel="noopener noreferrer" target="_blank" title="用户服务协议" class="copyright_item">用户服务协议</a> <!-- -->|
                    <a href="https://privacy.qq.com/document/preview/0b0dc16a0f004a35b77b7fd48a0b125b" rel="noopener noreferrer" target="_blank" title="隐私政策" class="copyright_item">隐私政策</a> <!-- -->|
                    <a href="https://y.qq.com/vip/right_declare/index.html" rel="noopener noreferrer" target="_blank" title="权利声明" class="copyright_item">权利声明</a> <!-- -->|
                    <a href="http://www.tencentmind.com/" rel="noopener noreferrer" target="_blank" title="广告服务" class="copyright_item">广告服务</a> <!-- -->|
                    <a href="http://hr.tencent.com/" rel="noopener noreferrer" target="_blank" title="腾讯招聘" class="copyright_item">腾讯招聘</a> <!-- -->|
                    <a href="https://y.qq.com/m/client/helper/pc.html" rel="noopener noreferrer" target="_blank" title="客服中心" class="copyright_item">客服中心</a> <!-- -->
                    |<a href="http://www.qq.com/map/" rel="noopener noreferrer" target="_blank" title="网站导航" class="copyright_item">网站导航</a> <!-- -->|
                    <a title="举报中心">举报中心</a>
                </p>
                <p>
                    Copyright © 1998 - <!-- -->2023<!-- --> Tencent.<!-- --> 
                    <a target="_blank" rel="noopener noreferrer" href="http://www.tencent.com/en-us/le/copyrightstatement.shtml" title="All Rights Reserved." class="copyright_item">All Rights Reserved.</a>
                </p>
                <p>
                    腾讯公司<!-- --> 
                    <a target="_blank" href="http://www.tencent.com/zh-cn/le/copyrightstatement.shtml" rel="noopener noreferrer" title="版权所有" class="copyright_item">版权所有</a>
                    ｜<a target="_blank" href="https://y.qq.com/music/common/upload/t_cm3_photo_publish/4055034.jpg" rel="noopener noreferrer" title="营业执照" class="copyright_item">营业执照</a>｜
                    <!-- -->网络文化经营许可证：<a target="_blank" href="https://y.qq.com/music/common/upload/t_cm3_photo_publish/5376429.jpg" rel="noopener noreferrer" title="粤网文[2023]2882-203号" class="copyright_item">粤网文[2023]2882-203号</a>｜
                    <!-- -->客服电话：<a href="tel:4006016666" title="客服电话">4006016666</a>｜<!-- -->违法与不良信息举报邮箱：<a href="mailto:tme_musicjubao@tencentmusic.com" title="违法与不良信息举报邮箱" class="copyright_item">tme_musicjubao@tencentmusic.com</a>
                </p>
            </div>
        </div>
</template>
<script>
export default{
    name:'FooterSec'
}
</script>
<style scoped>
.section_info{
    color:#999;
    background-color: #333333;
    font-size: 14px;
    line-height: 1.5;
    font-family:poppin,Tahoma,Arial,微软雅黑,sans-serif; ;
    margin-top: 70px;
}
.footer_info{
    width: 1016px;
    height: 577px;
    background-color: aliceblue;
    margin: 0 auto;
}
.footer_product{
    width: 360px;
    max-height: 290px;
}
.footer_download{
    width: 357px;
    max-height: 290px;
}
.footer_link{
    min-width: 310px;
    max-height: 354px;
}
.footer_platform{
    background-color: #333333;

}
.link_list{
    padding-left: 0;
}
.footer_info .footer_download{
    background-color: #333333;
}
.footer_info .footer_product{
    background-color:#333333;
}
.footer_info .footer_link{
    background-color: #333333;
}
.footer_info .footer_group{
    width: 200%;
    background-color: #333333;
}
.footer_group li a{
  color:#999;

    text-decoration: none;
}
.footer_info{
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}
.download_list{
    padding-left: 0;
    white-space: nowrap;

}
.download_list_item{
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-block;
    margin-right: 30px;
}
.download_list_item.windows{
    background-position: -2px 0;
   background-image: url('@/assets/footer_png/download.png');
}
.download_list_item.mac{
    background-position: -92px 0;

    background-image: url('@/assets/footer_png/download.png');

}
.download_list_item.android{
    background-position: -182px 0;

    background-image: url('@/assets/footer_png/download.png');

}
.download_list_item.iphone{
    background-position: -272px 0;

    background-image: url('@/assets/footer_png/download.png');

}
.download_list_item.windows:hover{
    background-image: url('@/assets/footer_png/download.png');
    background-position: -2px -49px;
    color: red;
}
.download_list_item.mac:hover{
    background-image: url('@/assets/footer_png/download.png');
    background-position: -92px -49px;
}
.download_list_item.android:hover{
    background-image: url('@/assets/footer_png/download.png');
    background-position: -182px -49px;
}
.download_list_item.iphone:hover{
    background-position: -272px -49px;
    background-image: url('@/assets/footer_png/download.png');

}
 .item_txt{
    font-size: 14px;
    position: absolute;
    top: 48px;
}
.item_txt:hover{
    color: #31c27c;
}

.product_list{
    padding-left: 0;
    white-space: nowrap;
}
.product_list_item{
   margin-right: 25px;
    position: relative;
    width: 41px;
    height: 48px;
    position: relative;
    display: inline-block;
}
.product_list_item.quanminkge{
    background-position: -370px 0;
    background-image: url('@/assets/footer_png/download.png');
}
.product_list_item.quanminkge:hover{
    background-position: -370px -49px;
    background-image: url('@/assets/footer_png/download.png');
}
.product_list_item.yinheyinxiao{
    background-position: -463px 0;
    background-image: url('@/assets/footer_png/download.png');
}
.product_list_item.yinheyinxiao:hover{
    background-position: -463px -49px;
    background-image: url('@/assets/footer_png/download.png');
}
.product_list_item.qplay{
    background-position: -563px 0;
    background-image: url('@/assets/footer_png/download.png');
}
.product_list_item.qplay:hover{
    background-position: -563px -49px;
    background-image: url('@/assets/footer_png/download.png');
}
.product_list_item.fanzhibobanlv{
    background-position: -650px 0;
    background-image: url('@/assets/footer_png/download.png');
}
.product_list_item.fanzhibobanlv:hover{
    background-position: -650px -49px;
    background-image: url('@/assets/footer_png/download.png');
}
.link_list_item{
    
    display: inline-block;
}

.link_list_item a{
    margin-bottom: 12px;
    display: block;
    color:#999;
    min-width: 100px;
    text-decoration: none;
}
.link_list_item>a:hover{
    color: #31c27c;
}
.item_txt{
    color:#999;

}
.platform_list{
    padding-left: 0;
}
.platform_list_item{
    margin-right: 12px;
    min-width: 100px;
    margin-bottom: 12px;
    display: inline-block;
}
.platform_list_item a{
    text-decoration: none;
    color:#999;
}

.footer_copyright{
    text-align: center;
}
.platform_list_item>a:hover{
color: #31c27c;

}
.copyright_item{
    text-decoration: none;
    color:#999;
}
.group_hd{
    display: block;
    margin-left: 40px;
}
.footer_group_list{
    list-style: none;
}
.footer_group_list>li>a:hover{
    color: #31c27c;
}
h3{
    margin-bottom: 20px;
}
</style>